{"version": "2.0","name": "Circle","subline": "Mobile & Tablet Responsive Template","username": "Enabled","created": "02/08/2015","website": "http://www.enableds.com","update": "02/08/2015","update_today": false,"email": "","description": "A mobile page with right, left or dual sidebars! ","intro": "","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "F.A.Q.","id": "f_a_q","content": "<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">How do I install the item?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tCopy and paste all the items in the code folder to your server to your desired location.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">What are those i class&quot;fa &quot; things?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tThat is Font Awesome, the amazing icons we used for this item you can learn more about them and find a cheatsheet on how to use them here&nbsp;http://fortawesome.github.io/Font-Awesome/icons/</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">How do I change the contact form information?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tThere is only one PHP file in the item, please open that item and replace the email address with yours.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<strong>How do I make the login page / sign in page / calendar page to work?&nbsp;</strong></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tPlease remember that this is a&nbsp;<strong>site template</strong> and is not connected to any CMS or any databases, so these features are mearly template designs, they are HTML and CSS and need to be connected to a back-end to work.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t&nbsp;</p>\n"},{"title": "Page Structure","id": "page_structure","content": "<pre class=\"html\">\n&lt;div class=&quot;all-elements&quot;&gt;\n    &lt;div class=&quot;header&quot;&gt;\n        &lt;!--Check Header Chapter--&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;header-clear&quot;&gt;&lt;/div&gt;\n    &lt;ul class=&quot;top-menu&quot;&gt;\n        &lt;!-- This is the dropdown menu from the top. Check Top Menu Chapter--&gt;\n    &lt;/ul&gt;\n    &lt;a href=&quot;#&quot; class=&quot;show-big-menu&quot;&gt;&lt;i class=&quot;fa fa-navicon bg-red2&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;!--The above anchor shows the top menu--&gt;\n    \n    &lt;div class=&quot;footer-menu&quot;&gt;\n        &lt;!-- This is the right ball menu, check Ball Menu Chapter--&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;menu-background&quot;&gt;&lt;!--This is the overlay when clicking the menus--&gt;\n\n    &lt;div class=&quot;content&quot;&gt;\n        &lt;!-- Add your content and container classes here --&gt; \n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tThe all-content class houses all elements and has a few overflow properties added to it to make it keep everything in place on mobiles.&nbsp;</p>\n<p>\tThe class=&quot;header&quot; is a fixed class and requires a class=&quot;header-clear&quot; after it to add a spacing so elements don&#39;t got underneeth it</p>\n<p>\tThe class=&quot;show-big-menu&quot; is the dropdown menu that appears when you tap the left hand ball&nbsp;</p>\n<p>\tThe class=&quot;footer-menu&quot; is the menu on the right that houses the balls&nbsp;</p>\n"},{"title": "Page Header","id": "page_header","content": "<pre class=\"html\">\n&lt;div class=&quot;header&quot;&gt;\n    &lt;a class=&quot;header-logo&quot; href=&quot;#&quot;&gt;&lt;/a&gt;\n    &lt;div class=&quot;header-icons&quot;&gt;\n        &lt;a class=&quot;bg-green2 show-share-bottom&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-share&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;a class=&quot;twitter-color&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;a class=&quot;facebook-color&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;decoration&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;\n&lt;div class=&quot;header-clear&quot;&gt;&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tLine 1 is the header wrapper. The header is set to a fixed position</p>\n<p>\tLine 2 is the header logo, to replace the header logo, open style.css and locate line 112. There, replace the background-image with your image and make sure it&#39;s double the size. Now, replace the width, height, and background size with HALF of those of your logo. This well keep it crisp and sexy on retina / high resolution screens.&nbsp;</p>\n<p>\tLine 3 houses the header icons. you can replace the icons using font-awesome and you can change the colors to those specified below: .bg-blue1, .bg-blue2, .bg-magenta1 .bg-magenta2, .bg-dark1 , .bg-dark2 .bg-green, .bg-green2, .bg-red1, .bg-red2, .bg-teal1, .bg-teal2, .bg-yellow2, .bg-yellow1, .bg-orange1, .bg-orange2. The class show-share-bottom will show the bottom share pop-up when tapped.&nbsp;</p>\n<p>\tLine 8 is the decoration.</p>\n<p>\tThe last line is the header clear. This is just an empty div with a big space in it to clear the fixed positioning of the header so elements don&#39;t render under it.&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Homepage Variations: Image Sliders","id": "homepage_variations_image_sliders","content": "<p>\tThe fullscreen slider is covered in our second documentation. You can check it out there.</p>\n<h4>\n\tCircle Slider</h4>\n<pre class=\"html\">\n&lt;div class=&quot;circle-slider half-bottom&quot;&gt;\n    &lt;div&gt;\n        &lt;img src=&quot;images/slider/1.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;h1&gt;Welcome to Cricle&lt;/h1&gt;\n        &lt;em class=&quot;text-red1 half-bottom&quot;&gt;A creative, mobile and tablet template!&lt;/em&gt;\n    &lt;/div&gt;        \n&lt;/div&gt;</pre>\n<p>\tLine 1 is the slider wrapper and function creator</p>\n<p>\tLines 2, 3, 4, 5, 6 is a slide element. duplicating this will create a new slide</p>\n<p>\tLine 3 is the image</p>\n<p>\tLine 4 is the title</p>\n<p>\tLine 5 is the description.</p>\n<p>\tLine 6 closes the slide&nbsp;</p>\n<p>\tLine 7 closes the slider</p>\n<h4>\n\tRegular Slider</h4>\n<pre class=\"html\">\n&lt;div class=&quot;slider-container full-bottom&quot;&gt;\n    &lt;div class=&quot;homepage-slider&quot; data-snap-ignore=&quot;true&quot;&gt;                \n        &lt;div&gt;\n            &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n            &lt;div class=&quot;homepage-slider-caption homepage-left-caption&quot;&gt;\n                &lt;h3&gt;Swipe me!&lt;/h3&gt;\n                &lt;p&gt;Hope you enjoy our latest item!&lt;/p&gt;\n            &lt;/div&gt;\n            &lt;img src=&quot;images/pictures/3.jpg&quot; class=&quot;responsive-image&quot; alt=&quot;img&quot;&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\tLine 1 is the slider wrapper</p>\n<p>\tLine 2 is the slider function wrapper&nbsp;</p>\n<p>\tLine 3,4,5,6,7,8,9,10 is a single slide. Duplicate it to create more &nbsp;slides</p>\n<p>\tLine 4 is the overlay. This darkens the background</p>\n<p>\tLine 5 is the slider caption wrapper</p>\n<p>\tLIne 6 is the heading</p>\n<p>\tLine 7 is the text</p>\n<p>\tLine 8 closes the caption wrapper</p>\n<p>\tLine 9 is the image</p>\n<p>\tLine 10 closes the slide</p>\n<p>\tLine 11 closes the slider function wrapper</p>\n<p>\tLine 12 closes the enclosing slider wrapper.&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Homepage Variations: Landing Thumbnails","id": "homepage_variations_landing_thumbnails","content": "<p>\tThe landing page with thumbnails uses the same structure as everything else except for the fact that it does not have the regular ball menus ( and these cannot be added to it )&nbsp;</p>\n<p>\tThe landing thumbnails page has the all elements class, the header at the top, the ball menu, the footer and the share bottom.&nbsp;</p>\n<p>\t<strong><u>ATTENTIO</u></strong><u><strong>N</strong></u></p>\n<p>\tOn the landing page with thhumbnails, the BODY must have the class &quot;circle-homepage&quot;&nbsp;</p>\n<h4>\n\tThumbnail Menu&nbsp;</h4>\n<pre class=\"html\">\n&lt;ul&gt;\n    &lt;li&gt;\n        &lt;a href=&quot;index.html&quot;&gt;\n            &lt;i class=&quot;fa fa-home bg-red1&quot;&gt;&lt;/i&gt;\n            &lt;em&gt;Home&lt;/em&gt;\n        &lt;/a&gt;\n    &lt;/li&gt;        \n\n    &lt;li&gt;\n        &lt;a href=&quot;list-features.html&quot;&gt;\n            &lt;i class=&quot;fa fa-cog bg-green2&quot;&gt;&lt;/i&gt;\n            &lt;em&gt;Features&lt;/em&gt;\n        &lt;/a&gt;\n    &lt;/li&gt;        \n\n    &lt;li&gt;\n        &lt;a href=&quot;list-gallery.html&quot;&gt;\n            &lt;i class=&quot;fa fa-camera bg-blue2&quot;&gt;&lt;/i&gt;\n            &lt;em&gt;Galleries&lt;/em&gt;\n        &lt;/a&gt;\n    &lt;/li&gt;\n&lt;/ul&gt;</pre>\n<p>\tThe UL houses LI classes. Duplicate the LI&#39;s to create more menus. We strongly recommend not using more than 9 items as this will keep it very elegant on mobiles. &nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\tEach li class has the following</p>\n<p>\tAn anchor - the menu item.&nbsp;</p>\n<p>\tAn icon class - using font awesome</p>\n<p>\tAn em class - The description&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Homepage Variations: Fixed Bottom Menu","id": "homepage_variations_fixed_bottom_menu","content": "<p>\tThe fixed footer menu page is basically the same page and has the same structure as all other indexes, except, this page does not support the bottom 2 balls.</p>\n<p>\tThe fixed menu supports a maximum of 9 icons. 5 will be visible on mobiles, and another 4 will show on tablets.&nbsp;</p>\n<p>\tLet&#39;s further explain&nbsp;</p>\n<pre class=\"html\">\n    &lt;ul class=&quot;footer-controls five-controls&quot;&gt;\n        &lt;li&gt;&lt;a class=&quot;active-home-tab&quot;   href=&quot;index5.html&quot;&gt;        &lt;i class=&quot;bg-red2 fa fa-home&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li&gt;&lt;a class=&quot;inactive-home-tab&quot; href=&quot;list-features.html&quot;&gt; &lt;i class=&quot;bg-magenta2 fa fa-cog&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li&gt;&lt;a class=&quot;inactive-home-tab&quot; href=&quot;list-gallery.html&quot;&gt;  &lt;i class=&quot;bg-green2 fa fa-camera&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li&gt;&lt;a class=&quot;inactive-home-tab&quot; href=&quot;list-portfolio.html&quot;&gt;  &lt;i class=&quot;bg-teal2 fa fa-picture-o&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li&gt;&lt;a class=&quot;inactive-home-tab&quot; href=&quot;list-contact.html&quot;&gt;  &lt;i class=&quot;bg-blue2 fa fa-envelope-o&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class=&quot;tablet-link&quot;&gt;&lt;a href=&quot;#&quot;&gt;       &lt;i class=&quot;facebook-color fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class=&quot;tablet-link&quot;&gt;&lt;a href=&quot;#&quot;&gt;       &lt;i class=&quot;twitter-color fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class=&quot;tablet-link&quot;&gt;&lt;a href=&quot;#&quot;&gt;       &lt;i class=&quot;google-color fa fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class=&quot;tablet-link&quot;&gt;&lt;a href=&quot;#&quot;&gt;       &lt;i class=&quot;bg-red2 fa fa-link&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n    &lt;/ul&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tThe main ul class, footer-controls has an adjecent class called five-controls. You can select between five-controls, four-controls, or three-controls. Keep in mind, the number of controls wll only be affected on mobile devices! Tablets will show another 4 balls on the right. Keeping only 3, 4, or even 5 would completely wreck the design of the footer menu.&nbsp;</p>\n<p>\tIf you select three-controls or four-controls, remove any element you wish except for the tablet-links.&nbsp;</p>\n<p>\tTo make an item active, give it the class active-home-tab, and to make it inactive, give it the class inactive-home-tab. Giving it the active-home-tab class will make the ball bigger.&nbsp;</p>\n"},{"title": "Left Ball Menu","id": "left_ball_menu","content": "<p>\tThe top menu, or the left ball activated menu will show a modal menu with dropdowns. This is very efficient in case you have many menu elements and can&#39;t fit them all on a small screen using the right ball.&nbsp;</p>\n<p>\tHere&#39;s how the top-menu works.&nbsp;</p>\n<pre class=\"html\">\n&lt;ul class=&quot;top-menu&quot;&gt;\n    &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;i class=&quot;fa fa-envelope bg-red1&quot;&gt;&lt;/i&gt;Contact&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;  \n    &lt;li class=&quot;has-submenu&quot;&gt;\n        &lt;a class=&quot;deploy-submenu&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-cog bg-blue2&quot;&gt;&lt;/i&gt;Homepages&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;ul class=&quot;submenu&quot;&gt;\n            &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Circle Slider&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href=&quot;index2.html&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Regular Slider&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href=&quot;index3.html&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Fullscreen Slider&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href=&quot;index4.html&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Landing Page&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href=&quot;index5.html&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Sticky Footer&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;/ul&gt;\n    &lt;/li&gt;\n&lt;/ul&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tLine 1 is the top-menu wrapper.</p>\n<p>\tLine 2 is a simple, inactive menu. Taps and goes where its&#39; selected to go. Inside of it, there&#39;s an I class which is a font-awesome class, a text, and another font-awesome class which is the ball on the right&nbsp;</p>\n<p>\tLIne 3 is the submenu wrapper</p>\n<p>\tLine 4 is the submenu wrapper deploy button.Tapping this will expand the menu</p>\n<p>\tLine 5 is the submenu elements wrapper. Inside this we have all our submenu elements</p>\n<p>\tLine 6, 7, 8, 9, 10 are submenu elements.&nbsp;</p>\n<p>\tLine 11 closes the submenu element wrapper</p>\n<p>\tLine 12 closes the submenu wrapper</p>\n<p>\tLine 13 closes the top-menu wrapper&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t<strong>To create an active, simple menu:</strong></p>\n<p>\tGive any simple menu list the following class &lt;li class=&quot;active-menu&quot;&gt;</p>\n<p>\t<strong>To create an active submenu item:</strong></p>\n<p>\tSubmenu items are exactly the same as simple menus, so giving any submenu item the class active-menu will make it active.&nbsp;</p>\n<p>\t<strong>To create an active submenu, expanded dropdown menu</strong></p>\n<p>\tThis may seem complicated, but it&#39;s not at all.&nbsp;</p>\n<p>\tGive the main anchor that deploys the submenu the class &quot;deploy-submenu active-submenu&quot; and this will change the plus icon to a red x icon</p>\n<p>\tGive the main ul submenu the class &quot;submenu show-submenu&quot; and this will make the drodown menu expand.&nbsp;</p>\n<p>\tAnd to create an active submenu item, simply use the advice above for submenu items and simple menus. Give any submenu element the class &quot;active-menu&quot;&nbsp;</p>\n"},{"title": "Right Ball Menu","id": "right_ball_menu","content": "<p>\t<strong>Attention:&nbsp;</strong></p>\n<p>\tThis menu supports a maximum of&nbsp;<strong>6 items.&nbsp;</strong>DO NOT add more as the current standard for small screens in the world is 540 pixels high! Using more than 6 items will make the invisible to small screen devices!&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;footer-menu&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;footer-menu-open&quot;&gt;\n        &lt;i class=&quot;fa fa-ellipsis-v bg-red2&quot;&gt;&lt;/i&gt;\n    &lt;/a&gt;        \n\n    &lt;a href=&quot;#&quot; class=&quot;footer-menu-close&quot;&gt;\n        &lt;em href=&quot;#&quot; class=&quot;footer-menu-open-text&quot;&gt;Navigation&lt;/em&gt;\n        &lt;i class=&quot;fa fa-times bg-red2&quot;&gt;&lt;/i&gt;\n    &lt;/a&gt;        \n\n    &lt;a href=&quot;list-features.html&quot; class=&quot;footer-menu-item fm-1&quot;&gt;\n        &lt;em&gt;Features&lt;/em&gt;\n        &lt;i class=&quot;fa fa-cog bg-red1&quot;&gt;&lt;/i&gt;\n    &lt;/a&gt;\n\n    &lt;a href=&quot;list-gallery.html&quot; class=&quot;footer-menu-item fm-2&quot;&gt;\n        &lt;em&gt;Gallery&lt;/em&gt;\n        &lt;i class=&quot;fa fa-camera bg-teal1&quot;&gt;&lt;/i&gt;\n    &lt;/a&gt;              \n\n    &lt;a href=&quot;list-portfolio.html&quot; class=&quot;footer-menu-item fm-3&quot;&gt;\n        &lt;em&gt;Portfolio&lt;/em&gt;\n        &lt;i class=&quot;fa fa-picture-o bg-teal2&quot;&gt;&lt;/i&gt;\n    &lt;/a&gt;        \n\n    &lt;a href=&quot;list-features.html&quot; class=&quot;footer-menu-item fm-4&quot;&gt;\n        &lt;em&gt;App Styled&lt;/em&gt;\n        &lt;i class=&quot;fa fa-mobile bg-blue1&quot;&gt;&lt;/i&gt;\n    &lt;/a&gt;        \n\n    &lt;a href=&quot;contact.html&quot; class=&quot;footer-menu-item fm-5&quot;&gt;\n        &lt;em&gt;Contact Us&lt;/em&gt;\n        &lt;i class=&quot;fa fa-envelope-o bg-blue2&quot;&gt;&lt;/i&gt;\n    &lt;/a&gt;\n&lt;/div&gt;\n&lt;div class=&quot;menu-background&quot;&gt;&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tLine 1 is the footer-menu wrapper. This houses all the ball menus</p>\n<p>\tLine 2, 3, 4 is the ball that opens the menu. Please do not modify this except for the color. The class footer-menu-open must stay untouched</p>\n<p>\tLine 6 7 8 9 is the menu closing ball. This only appears after the menu is deployed.&nbsp;</p>\n<p>\tGeneral explnation of all other ball elements</p>\n<p>\tLine 11 is the features ball. It has an anchor and the class fm-1 for positioning.&nbsp;</p>\n<p>\tLine 12 is the text of that features ball</p>\n<p>\tLine 13 is the icon for the feature ball&nbsp;</p>\n<p>\tLine 14 closes the feature ball.&nbsp;</p>\n<p>\tEach element from here on is basically the same, with the difference that the background can be changed to the background mentions in the the previous chapters and the fact that each ball must have the fm-1, fm-2 and so on classes up to fm-5. &nbsp;The fm-6 class is not programmed. Please do not use more than 7 balls as these will not be visible on smaller devices.&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Menu Balls Backgrounds","id": "menu_balls_backgrounds","content": "<p>\tAs you&#39;ve noticed, the balls of menus &nbsp;have different background colors and there are classes specifically made for this, like for example bg-teal2 or bg-green1. Here are all the variatons of colors you can use to change the colors of your menu ball items. Only use the class name , and not the entire code ( only the bolded text must be added to the menu )&nbsp;</p>\n<div>\n\t.<strong>bg-blue1</strong>{ &nbsp; &nbsp; &nbsp;background-color:#3498db!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-blue2</strong>{ &nbsp; &nbsp; &nbsp;background-color:#2980b9!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-magenta1</strong>{ &nbsp; background-color:#9b59b6!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-magenta2</strong>{ &nbsp; background-color:#8e44ad!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-dark1</strong>{ &nbsp; &nbsp; &nbsp;background-color:#34495e!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-dark2</strong>{ &nbsp; &nbsp; &nbsp;background-color:#2c3e50!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-green1</strong>{ &nbsp; &nbsp; background-color:#2ecc71!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-green2</strong>{ &nbsp; &nbsp; background-color:#27ae60!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-red1</strong>{ &nbsp; &nbsp; &nbsp; background-color:#e74c3c!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-red2</strong>{ &nbsp; &nbsp; &nbsp; background-color:#c0392b!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-teal1</strong>{ &nbsp; &nbsp; &nbsp;background-color:#1abc9c!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-teal2</strong>{ &nbsp; &nbsp; &nbsp;background-color:#16a085!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-yellow2</strong>{ &nbsp; &nbsp;background-color:#f39c12!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-yellow1</strong>{ &nbsp; &nbsp;background-color:#f1c40f!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-orange1</strong>{ &nbsp; &nbsp;background-color:#d35400!important; &nbsp;}</div>\n<div>\n\t.<strong>bg-orange2</strong>{ &nbsp; &nbsp;background-color:#e67e22!important; &nbsp;}</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<div>\n\t\t.<strong>facebook-color</strong>{ &nbsp; &nbsp;background-color:#3b5998; &nbsp; &nbsp;color:#FFFFFF;}</div>\n\t<div>\n\t\t.<strong>twitter-color</strong>{ &nbsp; &nbsp; background-color:#4099ff; &nbsp; &nbsp;color:#FFFFFF;}</div>\n\t<div>\n\t\t.<strong>google-color</strong>{ &nbsp; &nbsp; &nbsp;background-color:#d34836; &nbsp; &nbsp;color:#FFFFFF;}</div>\n\t<div>\n\t\t.<strong>pinterest-color{</strong> &nbsp; background-color:#C92228; &nbsp; &nbsp;color:#FFFFFF;}</div>\n\t<div>\n\t\t.<strong>sms-color</strong>{ &nbsp; &nbsp; &nbsp; &nbsp; background-color:#27ae60; &nbsp; &nbsp;color:#FFFFFF;}</div>\n\t<div>\n\t\t.<strong>mail-color</strong>{ &nbsp; &nbsp; &nbsp; &nbsp;background-color:#3498db; &nbsp; &nbsp;color:#FFFFFF;}</div>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Staff Slider","id": "staff_slider","content": "<pre class=\"html\">\n            &lt;div class=&quot;container&quot;&gt;\n                &lt;a href=&quot;#&quot; class=&quot;next-staff&quot;&gt;&lt;/a&gt;\n                &lt;a href=&quot;#&quot; class=&quot;prev-staff&quot;&gt;&lt;/a&gt;\n                &lt;div class=&quot;staff-slider&quot; data-snap-ignore=&quot;true&quot;&gt;\n\n                    &lt;div&gt;&lt;!--Duplicate Me--&gt;\n                        &lt;div class=&quot;staff-item&quot;&gt;\n                            &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot;&gt;\n                            &lt;h4&gt;John Doe&lt;/h4&gt;\n                            &lt;em&gt;Web Designer&lt;/em&gt;\n                            &lt;strong&gt;We love quotes, and sometimes it&#39;s&lt;/strong&gt;\n                            &lt;a href=&quot;#&quot; class=&quot;button button-red center-button&quot;&gt;Call&lt;/a&gt;\n                        &lt;/div&gt;\n                    &lt;/div&gt;\n\n                &lt;/div&gt;\n            &lt;/div&gt; </pre>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tTo create more slides, simply duplicate the class that has the &lt;!--Duplicate Me--&gt; comment.</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tAfter doing so, replace the image and text with your own, and you have a new slide</p>\n"},{"title": "Content Structure","id": "content_structure","content": "<pre class=\"html\">\n&lt;div class=&quot;content&quot;&gt;\n    &lt;div class=&quot;container&quot;&gt;\n\n    &lt;/div&gt;\n    &lt;div class=&quot;decoration&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tThe following structure is used in the template. The content class adds a margin left and right to aling the elements perfectly. And the container class adds a margin botton to your sections to keep the visual heirarchy clean.</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tHowever, when using content headings, you must close the content class and use the code bellow, then remake the structure above, sicne content headings take the full width of the screen</p>\n"},{"title": "Content Heading","id": "content_heading","content": "<pre class=\"html\">\n        &lt;div class=&quot;content-heading&quot;&gt;\n            &lt;h4&gt;Featured Project&lt;/h4&gt;\n            &lt;p&gt;Check and enjoy our featured item&lt;/p&gt;\n            &lt;i class=&quot;fa fa-star-o&quot;&gt;&lt;/i&gt;\n            &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n            &lt;img src=&quot;images/pictures/7w.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;/div&gt;</pre>\n<p>\t<span style=\"color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">You can replace the image, the icon, and the text to better describe your section.&nbsp;</span></p>\n"},{"title": "Is this it?","id": "is_this_it","content": "<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tNo! We have 2 documentations. This one explained the main features of the template, and it&#39;s structure. The second documentation describes the features from each indivudual page.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tIf there is anything you don&#39;t understand, please send us a message http://enableds.com/html-support/ through our support page and we will gladly assist you with absolutely anything that&#39;s related to the template! We take great pride in providing top notch support to all our customers!&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tPlease don&#39;t forget to rate 5 stars!</p>\n"}],"use_sub": false,"logo": "","favicon": "","customcss": "","easing": "swing","easingduration": "500","bgimage": "","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "FFFFFF","textcolor": "383838","linkcolor": "0000FF","hrcolor1": "EBEBEB","hrcolor2": "FFFFFF","btncolor": "FFFFFF","btncolor1": "0088CC","btncolor2": "0044CC","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "DDDDDD","sidebartextcolor": "222222","sidebarlinkcolor": "444444","sidebaractivecolor": "444444","sidebaractivetextcolor": "DDDDDD","sidebarhrcolor1": "AAAAAA","sidebarhrcolor2": "EEEEEE","cufon": "","documentationttype": "default","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}